import React from 'react';
import ReactDOM from 'react-dom';

class Header extends React.Component {
    render() {
        return (
            <div>
                <h1>{this.props.headerProp}</h1>
            </div>
        );
    }
}

class Content extends React.Component {

    componentWillMount() {
        console.log('Component WILL MOUNT!');
    }

    componentDidMount() {
        console.log('Component DID MOUNT!');
    }

    componentWillReceiveProps(newProps) {
        console.log('Component WILL RECEIVE PROPS!');
    }

    shouldComponentUpdate(newProps, newState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
        console.log('Component WILL UPDATE!');
    }

    componentDidUpdate(prevProps, prevState) {
        console.log('Component DID UPDATE!');
    }

    componentWillUnmount() {
        console.log('Component WILL UNMOUNT!');
    }


    render() {
        return (
            <div>
                {/*<h3>{this.props.myNumber}</h3>*/}
                <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp}/>
                <h4>{this.props.myDataProp}</h4>
            </div>
        );
    }
}

class TableRow extends React.Component {
    render() {
        return (
            <tr>
                <td>{this.props.data.id}</td>
                <td>{this.props.data.name}</td>
                <td>{this.props.data.age}</td>
            </tr>
        );
    }
}

class App extends React.Component {

    constructor() {
        super();

        /*this.state = {
         data:[
         {
         "id":1,
         "name":"Foo",
         "age":"20"
         },
         {
         "id":2,
         "name":"Bar",
         "age":"30"
         },
         {
         "id":3,
         "name":"Baz",
         "age":"40"
         }
         ]
         }*/

        this.state = {
            data: ['Initial data...']
        }

        this.setStateHandler = this.setStateHandler.bind(this);
        this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
        this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
        this.setNumber = this.setNumber.bind(this);
        this.updateState = this.updateState.bind(this);
    };

    setStateHandler() {
        var item = "setState...";
        var myArray = this.state.data;
        myArray.push(item);
        this.setState({data: myArray});
    };

    forceUpdateHandler() {
        this.forceUpdate();
    };

    findDomNodeHandler() {
        var myDiv = document.getElementById('myDiv');
        ReactDOM.findDOMNode(myDiv).style.color = 'green';
    };

    setNumber() {
        this.setState({data: this.state.data + 1})
    };

    updateState(e) {
        this.setState({data: e.target.value});
    };

    render() {
        return (
            <div>
                {/*<Header headerProp={this.state.header} />*/}
                {/*<table>
                 <tbody>
                 {this.state.data.map((person, i) => <TableRow key = {i} data = {person} />)}
                 </tbody>
                 </table>*/}

                <button onClick={this.setStateHandler}>SET STATE</button>
                 <h4>State Array: {this.state.data}</h4>

                {/*<button onClick={this.forceUpdateHandler}>FORCE UPDATE</button>
                 <h4>Random Number: {Math.random()}</h4>*/}

                {/*<button onClick={this.findDomNodeHandler}>FIND DOM NODE</button>
                 <div id="myDiv">NODE</div>*/}

                {/*<button onClick={this.setNumber}>INCREMENT</button>
                 <Content myNumber={this.state.data}/>*/}

                {/*<input type="text" value={this.state.data} onChange={this.updateState} />
                 <h4>{this.state.data}</h4>*/}

                {/*<Content myDataProp = {this.state.data} updateStateProp = {this.updateState} />*/}
            </div>
        );
    }
}

export default App;